﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>JavaScript 颜色梯度和渐变效果</title>
	<link rel="stylesheet" href="color.css" />
</head>
<body>
	颜色梯度变化演示:
	<div id="idGrads"></div>
	<br />
	<br />
	<div id="idPicker"></div>
	<br />
	<br />
	<table id="idMenu" width="600" border="0" cellspacing=5" cellpadding="0">
		<tr>
			<td><a href="#">Cropper</a></td>
			<td><a href="#">Tween</a></td>
			<td><a href="#">Slider</a></td>
			<td><a href="#">Resize</a></td>
			<td><a href="#">Drag</a></td>
			<td><a href="#">Tooltips</a></td>
		</tr>
	</table>
	<br />
	<br />
	<div id="idRandom"><b>点击随机颜色渐变</b></div>
	<script type="text/javascript" src="aider.js"></script>
	<script type="text/javascript" src="color.js"></script>
	<script type="text/javascript">
		
		function $$(id) {
    	    return "string" == typeof id ? document.getElementById(id) : id
    	}
		
		function GradsSet(color){
			var colors = ColorGrads(["#fff", color], 30);
			$$("idGrads").innerHTML = $$OBEA.map(colors.concat().concat(colors.reverse()), function(x){
				return "<div style='background:rgb(" + x.join(",") + ")'></div>";
			}).join("");
		}
		GradsSet("green");
		
		$$("idPicker").innerHTML = "<ul>" +
			$$OBEA.map(ColorGrads( [ "red", "orange", "yellow", "green", "cyan", "blue", "purple" ], 5 ), function(x){
				return $$OBEA.map(ColorGrads( [ "white", "rgb(" + x.join(",") + ")" ,"black" ], 5 ), function(x){
					return "<li style='background:rgb(" + x.join(",") + ")'></li>";
				}).join("");
			}).join("</ul><ul>") + "</ul>";
		
		$$OBEA.forEach($$("idPicker").getElementsByTagName("li"), function(li){
			li.onmouseover = function(){this.className = "on";}
			li.onmouseout = function(){this.className = "";}
			li.onclick = function(){GradsSet(this.style.backgroundColor);}
		});
		
		$$OBEA.forEach($$("idMenu").getElementsByTagName("td"), function(x, i){
			var a = x.getElementsByTagName("a")[0], href = a.href, txt = a.innerHTML;
			x.onclick = function(){ location.href = href; }
			x.innerHTML = txt;
	
			var ct1 = new ColorTrans(x, { to: "white" }),
				ct2 = new ColorTrans(x, { to: "rgb(20,150,0)", style: "backgroundColor" });
	
			x.onmouseover = function(){ ct1.transIn(); ct2.transIn(); }
			x.onmouseout = function(){ ct1.transOut(); ct2.transOut(); }
		});
		
		var ctRandom = new ColorTrans("idRandom", {style: "backgroundColor"}),
			ctRandom2 = new ColorTrans("idRandom");;
	
		$$("idRandom").onclick = function(){
			var rgb = $$OBEA.map([1, 1, 1], function(){
						return Math.floor(Math.random()*255);
					}),
				rgb2 = $$OBEA.map(rgb, function(x){
						return 255 - x;
					});
					
			ctRandom.reset({ 
				from: this.style.backgroundColor,
				to: "rgb(" + rgb.join(",") + ")"
			});
			ctRandom.transIn();
			
			ctRandom2.reset({
				from: this.style.color,
				to: "rgb(" + rgb2.join(",") + ")"
			});
			ctRandom2.transIn();
		}
	</script>
</body>
</html>